﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="register_step1.aspx.cs" Inherits="register_step1" %>
<%@ Register Src="CommonSearch.ascx" TagName="CommonSearch" TagPrefix="uc2" %>
<%@ Register Src="Header.ascx" TagName="Header" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>注册--上传头像</title>
    <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="style/common.css" />
    <link rel="stylesheet" type="text/css" href="style/Segment/Header.css" />
    <link rel="stylesheet" type="text/css" href="style/Segment/Search.css" />
    <link rel="stylesheet" type="text/css" href="style/Segment/Registerandsign.css" />
    <link rel="stylesheet" type="text/css" href="style/Segment/Footer.css" />
    <script src="js/footrip.js" type="text/javascript"></script>
    <script type="text/javascript">
    /* <![CDATA[ */
        var PROGRESS_INTERVAL = 500;
        var PROGRESS_COLOR = '#00b277';

        var _divFrame;
        var _divUploadMessage;
        var _divUploadProgress;
        var _ifrPhoto;

        var _loopCounter = 1;
        var _maxLoop = 10;
        var _photoUploadProgressTimer;

        function initPhotoUpload()
        {
            _divFrame = document.getElementById('divFrame');
            _divUploadMessage = document.getElementById('divUploadMessage');
            _divUploadProgress = document.getElementById('divUploadProgress');
            _ifrPhoto = document.getElementById('ifrPhoto');

            var btnUpload = _ifrPhoto.contentWindow.document.getElementById('btnUpload');

            btnUpload.onclick = function(event)
            {
                var filPhoto = _ifrPhoto.contentWindow.document.getElementById('filPhoto');

                //Baisic validation for Photo
                _divUploadMessage.style.display = 'none';

                if (filPhoto.value.length == 0)
                {
                    _divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Please specify the file.</span>';
                    _divUploadMessage.style.display = '';
                    filPhoto.focus();
                    return;
                }

                var regExp = /^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.JPG|.gif|.GIF|.png|.PNG|.bmp|.BMP)$/;

                if (!regExp.test(filPhoto.value)) //Somehow the expression does not work in Opera
                {
                    _divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Invalid file type. Only supports jpg, gif, png and bmp.</span>';
                    _divUploadMessage.style.display = '';
                    filPhoto.focus();
                    return;
                }

                beginPhotoUploadProgress();
                _ifrPhoto.contentWindow.document.getElementById('photoUpload').submit();
                _divFrame.style.display = 'none';
            }
        }

        function beginPhotoUploadProgress()
        {
            _divUploadProgress.style.display = '';
            clearPhotoUploadProgress();
            _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
        }

        function clearPhotoUploadProgress()
        {
            for (var i = 1; i <= _maxLoop; i++)
            {
                document.getElementById('tdProgress' + i).style.backgroundColor = 'transparent';
            }

            document.getElementById('tdProgress1').style.backgroundColor = PROGRESS_COLOR;
            _loopCounter = 1;
        }

        function updatePhotoUploadProgress()
        {
            _loopCounter += 1;

            if (_loopCounter <= _maxLoop)
            {
                document.getElementById('tdProgress' + _loopCounter).style.backgroundColor = PROGRESS_COLOR;
            }
            else 
            {
                clearPhotoUploadProgress();
            }

            if (_photoUploadProgressTimer)
            {
                clearTimeout(_photoUploadProgressTimer);
            }

            _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
        }
        
        function setImage(url)
        {
            var img = document.createElement("img");
            img.setAttribute("src",url);
            var imgBox = document.getElementById("imgBox");
            imgBox.removeChild(imgBox.firstChild);
            imgBox.appendChild(img);
        }

        function photoUploadComplete(message, isError, fileName)
        {
            clearPhotoUploadProgress();
            
            setImage(fileName);

            if (_photoUploadProgressTimer)
            {
                clearTimeout(_photoUploadProgressTimer);
            }

            _divUploadProgress.style.display = 'none';
            _divUploadMessage.style.display = 'none';
            _divFrame.style.display = '';

            if (message.length)
            {
                var color = (isError) ? '#ff0000' : '#00b277';

                _divUploadMessage.innerHTML = '<span style=\"color:' + color + '\;font-weight:bold">' + message + '</span>';
                _divUploadMessage.style.display = '';

                if (isError)
                {
                    _ifrPhoto.contentWindow.document.getElementById('filPhoto').focus();
                }
            }
        }
    /* ]]> */
    </script>
    </head>
<body id="normalbody">
    <form id="form1" runat="server">
     <asp:ScriptManager ID="ScriptManager1" runat="server">
       <Services>
           <asp:ServiceReference Path="WSLogin.asmx" />
       </Services>
     </asp:ScriptManager>    
<div id="container">
    <uc1:Header ID="Header1" runat="server" />
    <uc2:CommonSearch ID="CommonSearch1" runat="server" />

   <!--Main-->
   <div id="main">
      <div id="loaduserPic">
      <div class="welcomeInfo">陈毅<span>欢迎你注册足迹网,完成所有注册只需2步，之后我们能更好地为您服务</span></div>
      <div class="welcomeInfo"><img src="images/step1.jpg" /> <img src="images/arrow.jpg" /> <img src="images/step2_a.jpg" /> <img src="images/arrow.jpg" /> <img src="images/step3_a.jpg" /></div>
      <div class="boxTitle"><font class="select">1. 上传个人头像</font> | <a href="register_step2.aspx">2. 完善个人资料</a> | <a href="register_step3.aspx">3. 标记我的足迹</a></div>
       <div class="stepBox">
          <div class="leftbox"><h2>&nbsp;&nbsp;当前头像</h2><div id="imgBox" class="loadbox"><p id="defaultImg">还没有上传头像</p></div></div>
          <div class="rightItem">
          <h2>支持格式有JPG, GIF, PNG和BMP, 文件大小最好不要超过4M</h2>
          <div id="divFrame">
             <iframe id="ifrPhoto" onload="initPhotoUpload()" scrolling="no" frameborder="0" hidefocus="true" style="text-align:center;vertical-align:middle;border-style:none;margin:0px;width:100%;height:55px" src="ImageUpload.aspx"></iframe>
         </div>
         <div id="divUploadMessage" style="padding-top:4px;display:none">
         </div>
        <div id="divUploadProgress" style="padding-top:4px;display:none">
            <span style="font-size:smaller">上传图片中...</span>
            <div>
                <table border="0" cellpadding="0" cellspacing="2" style="width:100%">
                    <tbody>
                        <tr>
                            <td id="tdProgress1">&nbsp; &nbsp;</td>
                            <td id="tdProgress2">&nbsp; &nbsp;</td>
                            <td id="tdProgress3">&nbsp; &nbsp;</td>
                            <td id="tdProgress4">&nbsp; &nbsp;</td>
                            <td id="tdProgress5">&nbsp; &nbsp;</td>
                            <td id="tdProgress6">&nbsp; &nbsp;</td>
                            <td id="tdProgress7">&nbsp; &nbsp;</td>
                            <td id="tdProgress8">&nbsp; &nbsp;</td>
                            <td id="tdProgress9">&nbsp; &nbsp;</td>
                            <td id="tdProgress10">&nbsp; &nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
          </div>
          <div class="clear"></div>
       </div>
      
      </div>
   </div>
   
   

<!---Footer--->
<div id="footer">
<span>Copyright © 2008 Footrip.com All Rights Reserved</span>
<ul>
<li><a href="">关于我们</a> | </li>
<li><a href="">广告联系</a> | </li>
<li><a href="">隐私保护</a> | </li>
<li><a href="">特色功能</a> | </li>
<li><a href="">使用帮助</a> | </li>
<li><a href="">建议反馈</a> | </li>
</ul>
<div class="clear"></div>
</div>

</div>
    </form>
</body>
</html>
